<template>

  <yd-ls-box style="overflow: auto">
    <div class="yd-ls-seekdetail-head">
      <div class="yd-ls-seekdetail-img">
        <img :src="seekDetail.head || defalut_img" />
      </div>
      <p>{{ seekDetail.name }}</p>
      <p>{{ seekDetail.cust_name }} <i v-if="seekDetail.title">|</i> {{ seekDetail.title }}</p>
      <a href="seek.html" class="yd-ls-seekdetail-arrow"></a>
    </div>

    <yd-cell-group class="yd-ls-seekdetail-cell">
      <yd-cell-item type="link" :href="{path:'seekinfo', query:{drid: seekDetail.drid}}" arrow>
        <span slot="left" style="font-weight: 600;position:relative">
          门诊信息
          <i class="yd-tabbar-dot" v-if="seekDetail.unread"></i>
        </span>
      </yd-cell-item>
    </yd-cell-group>
    <!--<yd-accordion class="yd-ls-seekdetail-accordion" accordion>
      <yd-accordion-item title="医生擅长" open>
        <div style="padding: .24rem; line-height: .4rem">

        </div>
      </yd-accordion-item>
      <yd-accordion-item title="医生简介" open>
        <div style="padding: .24rem; line-height: .4rem">
          {{ seekDetail.introduction }}
        </div>
      </yd-accordion-item>
    </yd-accordion>-->
    <div class="yd-accordion yd-ls-seekinfo-accordion">
      <div @click="setRemarkIndex()" ref="remark">
        <div class="yd-accordion-head">
          <div class="yd-accordion-head-content">
            <div class="yd-accordion-title yd-accordion-title-full"><span style="font-size:.3rem; font-weight:600; padding-left:5px;">擅长</span></div>
          </div>
          <i class="yd-accordion-rotated"></i>
        </div>
        <div class="yd-accordion-content">
          <div>
            <div class="yd-ls-according-content"> {{ seekDetail.remark || '暂无数据' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="yd-accordion yd-ls-seekinfo-accordion">
      <div @click="setProfileIndex()" ref="profile">
        <div class="yd-accordion-head">
          <div class="yd-accordion-head-content">
            <div class="yd-accordion-title yd-accordion-title-full"><span style="font-size:.3rem; font-weight:600; padding-left:5px;">简介</span></div>
          </div>
          <i class="yd-accordion-rotated"></i>
        </div>
        <div class="yd-accordion-content">
          <div>
            <div class="yd-ls-according-content">{{ seekDetail.introduction || '暂无数据' }}</div>
          </div>
        </div>
      </div>
    </div>

    <yd-ls-flex-button>
      <yd-flexbox>
        <yd-flexbox-item v-for="(items,index) in seekVisit" :key="index">
          <button class="yd-btn yd-ls-seekdetail-btn"
                  :class="items.pay_type != 0 ? 'yd-btn-blue' : 'yd-btn-disabled'"
                  @click="goApply(seekDetail.drid, items.visit_type, items.visit_id, items.visit_remark, items.pay_type, seekDetail.name)">
            <div>{{ items.visit_remark }}咨询</div>
            <span>{{ items.pay_remark }}</span>
          </button>
        </yd-flexbox-item>
      </yd-flexbox>
    </yd-ls-flex-button>
  </yd-ls-box>
</template>

<script>
  import ydLsBox from '../../../components/yd-ls-box.vue'
  import ydLsLayout from '../../../components/yd-ls-layout.vue'
  import ydLsFlexButton from '../../../components/yd-ls-flexbutton.vue'
  import api from '../../../axios/api'

  export default {
    name: 'seekdetail',
    data() {
      return {
        seekDetail: [],
        seekVisit: [],
        defalut_img: api.default_img_dot // 医生缺省头像
      }
    },
    created() {
      //TODO:初始化数据
      let drid = this.$route.query.drid
      this.getSeekDetail(drid)
      //TODO: 保证每次进入，都是第一个列表打开状态
      this.$nextTick(()=>{
        setTimeout(()=>{
          this.setShowIndex(0)
        },100)

      })
    },
    methods: {
      init() {

      },
      getSeekDetail(id) {
        this.$dialog.loading.open(api.default_loading_txt);
        this.axios.get(api.seek_detail, {params: {id: id}})
          .then(m=>{
            let seek_detail_data = m.data
            this.seekDetail = seek_detail_data.data
            this.seekVisit = this.seekDetail.visits
            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      goApply(drid, type, vid, vname, ptype, name) {
        if(type == 1){
          window.location = `index.html#/message?type=seekdetail&drid=${drid}&drname=${name}`
        }
        if(type != 1 && ptype != 0){
          sessionStorage.vName = vname
          sessionStorage.vType = type
          sessionStorage.vId = vid
          sessionStorage.vForm = 'seekdetail'
          window.location = 'apply.html'
        }
        return
      },
      setShowIndex(ref_name) {
        let remark = this.$refs.remark
        remark.children[1].style.height = ''
        remark.children[0].children[1].className = 'yd-accordion-rotated'

        let profile = this.$refs.profile
        profile.children[1].style.height = ''
        profile.children[0].children[1].className = 'yd-accordion-rotated'
      },
      setRemarkIndex() {
        let remark = this.$refs.remark
        let rHeight = remark.children[1].style.height
        if(rHeight == ''){
          remark.children[1].style.height = 0
          remark.children[0].children[1].className = ''
        }else {
          remark.children[1].style.height = ''
          remark.children[0].children[1].className = 'yd-accordion-rotated'
        }
      },
      setProfileIndex() {
        let profile = this.$refs.profile
        let pHeight = profile.children[1].style.height
        if(pHeight == ''){
          profile.children[1].style.height = 0
          profile.children[0].children[1].className = ''
        }else {
          profile.children[1].style.height = ''
          profile.children[0].children[1].className = 'yd-accordion-rotated'
        }
      }
    },
    mounted() {
      this.init()
    },
    components: { ydLsBox, ydLsLayout, ydLsFlexButton }


  }
</script>

<style>

  .yd-ls-according-content {
    padding: 0.24rem;
    line-height: 0.4rem;
    background-color:aliceblue;
  }

  .yd-ls-seekdetail-cell {
    margin-bottom: .15rem;
  }
  .yd-ls-seekdetail-btn {
    width: 100%;
    padding: 0;
  }
  .yd-ls-seekdetail-btn div {
    font-weight: 600;
    font-size: .3rem;
  }
  .yd-ls-seekdetail-btn span {
    font-size: .24rem;
  }
  .yd-ls-seekdetail-arrow:after {
    position: absolute;
    top: 12px;
    left: -8px;
    z-index: 10;
    width: 1rem;
    height: 1rem;
    margin-left: .05rem;
    margin-right: -.08rem;
    display: block;
    font-family: YDUI-INLAY;
    font-size: .34rem;
    color: #FFF;
    content: "\E607";
  }
  .yd-ls-seekdetail-head{
    width:100%;
    overflow:hidden;
    text-align: center;
    padding-top: .8rem;
    background-color: rgb(72, 112, 243);
  }
  .yd-ls-seekdetail-head .yd-ls-seekdetail-img {
    display: inline-block;
    width: 1.14rem;
    height: 1.14rem;
    overflow: hidden;
    border-radius: 50%;
  }
  .yd-ls-seekdetail-head .yd-ls-seekdetail-img img {
    width: 100%;
    height: 100%;
  }
  .yd-ls-seekdetail-head p {
    font-size: 0.28rem;
    line-height: 0.54rem;
    color: #fff;
  }
  .yd-ls-seekdetail-accordion .yd-accordion-content {
    background-color: aliceblue;
  }
  .yd-ls-seekdetail-accordion .yd-accordion-title {
    font-weight: 600;
  }
</style>
